<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:fn="http://java.sun.com/jsp/jstl/functions"
                template="/Facelets/Templates/template.xhtml">

    <ui:define name="content">	

        <script type="text/javascript">  
        function handleLoginRequest(xhr, status, args) {  
         if(args.validationFailed) {  
             jQuery('#dialog').parent().effect("shake", { times:2 }, 100);  
         } else {  
             dlgCadastro.hide();  
         }  
                }
     	
        function fadein(input, container) {
                container.fadeIn("slow");
        }
        
        function fadeout(input, container) {
                container.fadeOut("slow");        	
        }
        </script>
         <div class="ui-widget" style="padding-left: 10px; padding-top: 5px; padding-bottom: 14px;">
            <a href="#{request.contextPath}/index.faces" style="color: black;">Home</a> > Cadastro de Usuários
        </div>
        <p:fieldset legend="Cadastro de Usuarios">
            <table style="width: 100%; height: 100%;">
                <tr>
                <td style="width: 16%; text-align: left;">
            
            <h:form id="formTool">
                <p:panel>
                    <p:commandButton title="Cadastrar Novo Usuario"
                                     value="Novo Usuario" image="ui-icon ui-icon-document"
                                     action="#{UsuariosBean.botaoNovoUsuarioAction}"
                                     oncomplete="dlgCadastro.show()" update="formCadastro"
                                     style="width: 160px; height: 30px;"/>
                </p:panel>
            </h:form>
                </td>
                <td style="width: 25%;"></td>
                <td><h:graphicImage value="/imagens/messagebox.png" /></td>
                <td style="text-align: left;">
                    <p>
                        <span style="color: cornflowerblue;" class="ui-widget">Nesta seção pode ser feito o cadastro de novos <strong>usuários</strong>, edição ou exclusão.</span><br/>
                        <span style="color: cornflowerblue;" class="ui-widget">Dica 1: Para cadastrar novos clique no botão a sua esquerda.</span><br/>
                        <span style="color: cornflowerblue;" class="ui-widget">Dica 2: Para editar ou excluir visualize e os faça na tabela abaixo.</span>
               
                    </p>
                </td>
                <td style="width: 10%;"></td>
                </tr>
            </table>
            
        </p:fieldset>

        <h:form id="formTabela">
            <p:panel>
                <p:dataTable id="List" rows="10" paginator="true"
                             paginatorPosition="top"
                             var="usuario" value ="#{UsuariosBean.usuarios}">
                    <f:facet name="header">Usuarios</f:facet>
                    <p:column headerText="Perfil" style="width:10px">
                       <h:outputText value="#{usuario.dtype}"/>
                    </p:column>  
                    <p:column headerText="CPF" style="width:10px">
                        <h:outputText value="#{usuario.cpf}"/>
                    </p:column>   

                    <p:column headerText="Nome" style="width:10px">
                        <h:outputText value="#{usuario.nome}"/>
                    </p:column> 

                    <p:column headerText="Telefone" style="width:10px">
                        <h:outputText value="#{usuario.telefone}"/>
                    </p:column>  

                    <p:column headerText="Editar" style="width:10px">
                        <p:commandButton image = "ui-icon-pencil"
                                         update="formCadastro" oncomplete = "dlgCadastro.show();"
                                         action="#{UsuariosBean.botaoAlterarUsuarioAction}">
                            <f:setPropertyActionListener value="#{usuario}"
                                                         target="#{UsuariosBean.usuario}"/>
                        </p:commandButton>
                    </p:column>

                    <p:column headerText="Excluir" style="width:32px">
                        <p:commandButton update="formTabela"
                                         onclick="confirmation.show();"
                                         image="ui-icon-trash" action="#{UsuariosBean.botaoApagarUsuarioAction}">
                            <f:setPropertyActionListener value="#{usuario}"
                                                         target="#{UsuariosBean.usuario}"/>
                        </p:commandButton>
                    </p:column>

                    <f:facet name="footer">  
                        #{fn:length(UsuariosBean.usuarios)} usuários no total.  
                    </f:facet>
                </p:dataTable>
            </p:panel>

        </h:form>

        <h:form>
            <p:confirmDialog message="Deseja realmente excluir este Usuario?"
                             showEffect="slide" hideEffect="explode" appendToBody="true"
                             header="Confirmação" severity="alert" modal="true"
                             widgetVar="confirmation">

                <p:commandButton value="Sim" update="formTabela"
                                 oncomplete="confirmation.hide()"
                                 />
                <p:commandButton value="Não" onclick="confirmation.hide()"
                                 type="button" />
            </p:confirmDialog>
        </h:form>

        <p:dialog id = "dialog" widgetVar="dlgCadastro" resizable="false" modal="true" appendToBody="true" closeOnEscape="true"
                  position="center" width="710">
            <h:form id="formCadastro">
                <p:growl id="msgs"/>
                <p:fieldset legend="Cadastro de Usuario">
                    <h:panelGrid columns="2" cellpadding="5">   
                        
                        <h:outputText value="Selecione o perfil do usuário *: "/>
                        <h:selectOneMenu required="true" requiredMessage="Campo [Perfil] de preenchimento obrigatório"
                                         value="#{UsuariosBean.perfil}" disabled="#{!UsuariosBean.insert}">
                            <f:selectItem itemValue="Administrador" itemLabel="Administrador"/>
                            <f:selectItem itemValue="Professor" itemLabel="Professor"/>
                            <f:selectItem itemValue="Monitor" itemLabel="Monitor"/>
                            <f:selectItem itemValue="Apoio" itemLabel="Apoio Administrativo"/>
                            <f:ajax event="change" listener="#{UsuariosBean.selectOneChangePerfil}" render="formCadastro"/>
                        </h:selectOneMenu>
                        
                        <h:outputText value="Nome *:" />
                        <p:inputText id="txtTipo" style="width:450px"
                                     required="true"	requiredMessage="Campo [Nome] de preenchimento obrigatório"
                                     onkeydown="this.value = this.value.toUpperCase();"
                                     onkeyup="this.value = this.value.toUpperCase()"
                                     value="#{UsuariosBean.nome}">
                        </p:inputText>
                        
                        <h:outputText value="CPF *:" />
                        <p:inputMask mask="999.999.999-99"
                                     required="true" requiredMessage="Campo [CPF] de preenchimento obrigatório"
                                     value="#{UsuariosBean.cpf}"/>

                        <h:outputText value="Matrícula (somente para professores): " rendered="#{UsuariosBean.showMatricula}"/>
                        <p:inputText style="width:450px" rendered="#{UsuariosBean.showMatricula}"
                                     onkeydown="this.value = this.value.toUpperCase();"
                                     onkeyup="this.value = this.value.toUpperCase()"
                                     value="#{UsuariosBean.matricula}">
                        </p:inputText>

                        <h:outputText value="Email *: "/>
                        <p:inputText style="width:450px"
                                     required="true"	requiredMessage="Campo [Email] de preenchimento obrigatório"
                                     onkeydown="this.value = this.value.toUpperCase();"
                                     onkeyup="this.value = this.value.toUpperCase()"
                                     value="#{UsuariosBean.email}">
                        </p:inputText>

                        <h:outputText value="Telefone *: "/>
                        <p:inputMask mask="(99)9999-9999" required="true"
                                     requiredMessage="Campo [Telefone] de preenchimento obrigatório"
                                     value="#{UsuariosBean.telefone}"/>

                        <h:outputText value="Login *: "/>
                        <p:inputText style="width:450px"
                                     required="true"	requiredMessage="Campo [Login] de preenchimento obrigatório"
                                     onkeydown="this.value = this.value.toUpperCase();"
                                     onkeyup="this.value = this.value.toUpperCase()"
                                     value="#{UsuariosBean.login}">
                        </p:inputText>

                        <h:outputText value="Senha *: "/>
                        <p:password inline="true" onshow="fadein" onhide="fadeout" feedback="password" minLength="15"
                                    value="#{UsuariosBean.senha}" required="true" requiredMessage="Digite a senha."/>

                        <h:outputText value="Repita a senha *: "/>
                        <p:password inline="true" onshow="fadein" onhide="fadeout" feedback="password" minLength="15"
                                    value="#{UsuariosBean.senhaRepetida}" required="true" requiredMessage="Digite a repetição de senha."/>                        
                    </h:panelGrid>

                    <h:panelGrid columns="3" cellpadding="5">
                        <p:commandButton value="Salvar" image = "ui-icon-save"
                                         update="formTabela msgs" 
                                         action="#{UsuariosBean.botaoSalvarUsuarioAction}" oncomplete="handleLoginRequest(xhr, status, args)"/>
                        <p:commandButton type="reset" value="Resetar Modificações" />
                        <p:commandButton value="Cancelar" immediate="true" onclick="dlgCadastro.hide()"/>
                    </h:panelGrid>
                </p:fieldset>
            </h:form>
        </p:dialog>
    </ui:define>
</ui:composition>